<template>
  <div>
    <PageContainer>
      <div>
        <WeekSelect v-model="selectDate" />
      </div>

      <el-dialog v-model="rentalDialog" title="教室租赁" alignCenter>
        <div class="flex gap-[30px] color-666 text-[14px]">
          <span class="item flex items-center gap-[5px]">
            <el-icon><WindPower /></el-icon> 舞蹈教室
          </span>
          <span class="item flex items-center gap-[5px]">
            <el-icon><Clock /></el-icon> 2024-08-30 周五
          </span>
        </div>
        <el-tabs v-model="tabName" class="min-h-400px">
          <el-tab-pane label="代租赁" name="proxyLeasing">
            <proxyLeasing />
          </el-tab-pane>
          <el-tab-pane label="已租赁" name="alreadyLeased">
            <alreadyLeased />
          </el-tab-pane>
          <el-tab-pane label="已取消" name="cancelled">
            <leaseCancelled />
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </PageContainer>
  </div>
</template>

<script lang="ts" setup>
import moment from 'moment'
import proxyLeasing from './onlineRentalTabs/proxyLeasing.vue'
import alreadyLeased from './onlineRentalTabs/alreadyLeased.vue'
import leaseCancelled from './onlineRentalTabs/leaseCancelled.vue'

defineOptions({ name: 'OnlineRental' })
const selectDate = ref(moment().format('YYYY-MM-DD'))

const rentalDialog = ref(false)

const tabName = ref('proxyLeasing')
</script>

<style scoped lang="scss"></style>
